<template>
	<div class="loginstyle">
		<div class="wxloginwarp">
			<el-form ref="forms" :model="form">
				<el-form-item>
					<el-input v-model="form.acount" placeholder="账号">
						<template #prepend>
							<i class="iconfont wx-user"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.password" placeholder="密码">
						<template #prepend>
							<i class="iconfont wx-mima"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-button type="primary" style="width: 100%;" @click="onSubmit">登录</el-button>
				
			</el-form>
		</div>
		<!-- <h1 style="color:#fff">{{ infoStore.count }}---{{infoStore.total}}</h1>
		<button @click="updateCount">点击我修改仓库数据</button> -->
	</div>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance
	} from 'vue';
	import {useRouter} from 'vue-router';
	import useInfoStore from "../../store/modules/info.js"; //引入pinia store
	import { ElMessage } from 'element-plus'
	//获取小仓库对象
	let infoStore = useInfoStore();
	const updateCount = () => {//修改数据方法
	  //仓库调用自身的方法去修改仓库的数据
	  infoStore.updateNum(66);
	};
	
	const router = useRouter();
	const form = reactive({
		acount:'',
		password:''
	})
	const { proxy } = getCurrentInstance();
	const onSubmit = ()=>{
		
		proxy.$http.post("/login", { password:form.password,username:form.acount })
		.then((res) => {
		  	console.log(res);
			localStorage.setItem("token",'123456')
			router.push("/home");
		 }).catch((error)=>{
			 localStorage.setItem("token",'123456')
			 router.push("/home");
			 console.log(error)
		 });
	}
</script>

<style scoped>
	.loginstyle {
		padding: 0;
		margin: 0;
		height: 100%;
		background-image: url('../../assets/images/login-bg.jpg');
		background-size: cover;
		background-position: 50% center;
	}

	.wxloginwarp {
		width: 300px;
		height: 150px;
		background: #fff;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 100px;
		margin: auto;
		padding: 60px 20px;
	}
</style>